<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <style>

        body{

            background-image: url("${pageContext.request.contextPath}/images/loginbg.png"),url('${pageContext.request.contextPath}/images/light.png');
            background-position: center top;
            background-repeat: no-repeat;
            background-color:  #1c77ac !important;
            text-align: center;
        }

        .logo-title{
            color: #FFFFFF;
            width:auto;
            margin-top: 50px;
            box-sizing: border-box;
            margin-left: 70px;
            position: relative;
            height: 70px;
        }
        .logo-title img{
            position: absolute;
            left: 50%;
            margin-left: -190px;
        }
        .logo-title h2{
            line-height: 45px;
        }

        .logo-title h5{
            line-height: 25px;
        }

        h1,h2,h3,h4,h5,h6{
            padding: 0px !important;
            margin: 0px !important;
        }

        .login-main{
            background-color: #FFF;
            box-sizing: border-box;
            border: 5px solid #1C77AC;
            width: 100%;
            padding: 15px 20px;
            margin: 10px auto 0;
        }
        .login-main form > p{
            margin-bottom: 15px;
        }

        .login-title{
            font-size: 18px;
            line-height: 40px;
        }
        .login-container{
            overflow: hidden;
            position: fixed;
            left: 50%;
            top:35%;
            width: 380px;
            margin-left: -190px;
        }

        #v-code {
            width: 90px;
        }

        .login-container input[type=submit]{
            margin-top: 5px;
        }

        /*手机登录样式*/
        @media (min-width: 300px ) and (max-width: 800px){

            .login-container {
                width: 330px;
                margin-left: -165px;
            }

            .logo-title img {
                margin-left: -165px;
            }

            #v-code {
                width: 70px;
            }

            .login-main {
                margin-top: 0px;
                padding: 10px 12px;
            }
        }

    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
</head>
<body>
<div class="wrapper">
    <div class="login-container">
        <div class="logo-title">
            <img src="${pageContext.request.contextPath}/images/logo-icon.png" alt="" class="img-responsive">
        </div>

        <div class="login-main">
            <p class="login-title">用户登录</p>
            <form action="/index">
                <p>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">账号</span>
                        <input type="text" class="form-control" >
                    </div>
                </p>
                <p>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">密码</span>
                        <input type="text" class="form-control" >
                    </div>
                </p>
                <p>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon ">职位</span>
                        <select name="" id="" class="form-control">
                            <option value="">学生</option>
                            <option value="">学习委员</option>
                            <option value="">教师</option>
                            <option value="">院系主任</option>
                            <option value="">系统管理员</option>
                        </select>
                    </div>
                </p>
                <p>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">验证码</span>
                        <input type="text" class="form-control" >
                        <span class="input-group-addon">
                                <img src="${pageContext.request.contextPath}/images/logo-icon.png" id="v-code"  height="0px" alt="">
                         </span>
                    </div>
                </p>
                <p>
                    <input type="submit" class="btn btn-primary form-control input-lg btn-lg" value="立即登录">
                </p>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        var img_height = $("input[type=text]").height() - 4;

        $("#v-code").css({
            height:img_height
        });

        var container_height = $(".login-container").height();
        $(".login-container").css("margin-top",0 - container_height*0.4);
    })
</script>
</body>
</html>
